<!DOCTYPE html>
<html>
<head>
	<title>物流异常预警 - 雁农冷链平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- 所有的 css -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/css/admin.css">
	<style>
		.alerts-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.alert-header {
			margin-bottom: 20px;
			padding: 20px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}
		.stats-row {
			margin-bottom: 20px;
		}
		.stat-card {
			padding: 25px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			text-align: center;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
		}
		.stat-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 25px rgba(0,0,0,0.15);
		}
		.stat-card::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4px;
			background: linear-gradient(90deg, #409EFF, #67C23A);
		}
		.stat-card.danger::before {
			background: linear-gradient(90deg, #F56C6C, #FF8A80);
		}
		.stat-card.warning::before {
			background: linear-gradient(90deg, #E6A23C, #FFB74D);
		}
		.stat-icon {
			font-size: 36px;
			margin-bottom: 10px;
		}
		.stat-number {
			font-size: 32px;
			font-weight: bold;
			margin-bottom: 8px;
		}
		.stat-label {
			color: #666;
			font-size: 14px;
		}
		.alerts-section {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			padding: 20px;
		}
		.alert-item {
			padding: 20px;
			margin-bottom: 15px;
			border-radius: 12px;
			border-left: 5px solid #ddd;
			background: #fafafa;
			transition: all 0.3s ease;
			position: relative;
		}
		.alert-item:hover {
			transform: translateX(5px);
			box-shadow: 0 4px 15px rgba(0,0,0,0.1);
		}
		.alert-item.critical {
			border-left-color: #F56C6C;
			background: linear-gradient(135deg, #fef0f0 0%, #fff 100%);
		}
		.alert-item.warning {
			border-left-color: #E6A23C;
			background: linear-gradient(135deg, #fdf6ec 0%, #fff 100%);
		}
		.alert-item.info {
			border-left-color: #409EFF;
			background: linear-gradient(135deg, #ecf5ff 0%, #fff 100%);
		}
		.alert-header-row {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 10px;
		}
		.alert-title {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			margin-bottom: 5px;
		}
		.alert-time {
			font-size: 12px;
			color: #999;
		}
		.alert-level {
			padding: 4px 12px;
			border-radius: 20px;
			font-size: 12px;
			font-weight: bold;
		}
		.level-critical {
			background: #F56C6C;
			color: white;
		}
		.level-warning {
			background: #E6A23C;
			color: white;
		}
		.level-info {
			background: #409EFF;
			color: white;
		}
		.alert-content {
			color: #666;
			line-height: 1.6;
			margin-bottom: 15px;
		}
		.alert-details {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 15px;
			margin-bottom: 15px;
		}
		.detail-item {
			padding: 10px;
			background: rgba(255,255,255,0.8);
			border-radius: 8px;
			border: 1px solid #f0f0f0;
		}
		.detail-label {
			font-size: 12px;
			color: #909399;
			margin-bottom: 5px;
		}
		.detail-value {
			font-size: 14px;
			font-weight: bold;
			color: #333;
		}
		.alert-actions {
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
		}
		.filter-section {
			margin-bottom: 20px;
		}
		.filter-tags {
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
			margin-top: 15px;
		}
		.filter-tag {
			padding: 8px 16px;
			border-radius: 20px;
			border: 2px solid #e4e7ed;
			background: #fff;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 14px;
		}
		.filter-tag:hover {
			border-color: #409EFF;
			color: #409EFF;
		}
		.filter-tag.active {
			background: #409EFF;
			color: white;
			border-color: #409EFF;
		}
		.empty-state {
			text-align: center;
			padding: 60px 20px;
			color: #999;
		}
		.empty-icon {
			font-size: 64px;
			margin-bottom: 20px;
			opacity: 0.5;
		}
		.refresh-btn {
			position: fixed;
			bottom: 30px;
			right: 30px;
			z-index: 1000;
		}
		.pulse {
			animation: pulse 2s infinite;
		}
		@keyframes pulse {
			0% { transform: scale(1); }
			50% { transform: scale(1.05); }
			100% { transform: scale(1); }
		}
	</style>
</head>
<body>
	<div id="app" class="vue-admin-beautiful-wrapper">
		<div class="alerts-container">
			<!-- 页面标题 -->
			<div class="alert-header">
				<h2 style="margin: 0 0 15px 0; color: #333;">⚠️ 物流异常预警中心</h2>
				<p style="margin: 0; color: #666;">实时监控运输过程中的各类异常情况，及时预警处理</p>
			</div>

			<!-- 统计卡片 -->
			<el-row :gutter="20" class="stats-row">
				<el-col :span="6">
					<div class="stat-card danger">
						<div class="stat-icon" style="color: #F56C6C;">🚨</div>
						<div class="stat-number" style="color: #F56C6C;">{{ stats.critical }}</div>
						<div class="stat-label">紧急预警</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="stat-card warning">
						<div class="stat-icon" style="color: #E6A23C;">⚠️</div>
						<div class="stat-number" style="color: #E6A23C;">{{ stats.warning }}</div>
						<div class="stat-label">一般预警</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-icon" style="color: #409EFF;">ℹ️</div>
						<div class="stat-number" style="color: #409EFF;">{{ stats.info }}</div>
						<div class="stat-label">提醒信息</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-icon" style="color: #67C23A;">✅</div>
						<div class="stat-number" style="color: #67C23A;">{{ stats.resolved }}</div>
						<div class="stat-label">已处理</div>
					</div>
				</el-col>
			</el-row>

			<!-- 筛选区域 -->
			<div class="alerts-section filter-section">
				<el-form :inline="true" :model="filterForm">
					<el-form-item label="预警级别">
						<el-select v-model="filterForm.level" placeholder="全部级别" style="width: 150px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="紧急" value="critical"></el-option>
							<el-option label="警告" value="warning"></el-option>
							<el-option label="信息" value="info"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="异常类型">
						<el-select v-model="filterForm.type" placeholder="全部类型" style="width: 180px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="温度异常" value="temperature"></el-option>
							<el-option label="运输延迟" value="delay"></el-option>
							<el-option label="货物破损" value="damage"></el-option>
							<el-option label="设备故障" value="equipment"></el-option>
							<el-option label="路线偏离" value="route"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="处理状态">
						<el-select v-model="filterForm.status" placeholder="全部状态" style="width: 150px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="待处理" value="pending"></el-option>
							<el-option label="处理中" value="processing"></el-option>
							<el-option label="已解决" value="resolved"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="filterAlerts">筛选</el-button>
						<el-button @click="resetFilter">重置</el-button>
						<el-button type="success" @click="refreshAlerts">刷新</el-button>
					</el-form-item>
				</el-form>

				<!-- 快速筛选标签 -->
				<div class="filter-tags">
					<div 
						v-for="tag in quickFilters" 
						:key="tag.key"
						:class="['filter-tag', {active: activeQuickFilter === tag.key}]"
						@click="applyQuickFilter(tag.key)"
					>
						{{ tag.label }}
					</div>
				</div>
			</div>

			<!-- 预警列表 -->
			<div class="alerts-section">
				<h3 style="margin: 0 0 20px 0; color: #333;">📋 预警列表 ({{ filteredAlerts.length }})</h3>
				
				<div v-if="filteredAlerts.length === 0" class="empty-state">
					<div class="empty-icon">📭</div>
					<div>暂无符合条件的预警信息</div>
				</div>

				<div 
					v-for="alert in filteredAlerts" 
					:key="alert.id"
					:class="['alert-item', alert.level, {pulse: alert.level === 'critical' && alert.status === 'pending'}]"
				>
					<div class="alert-header-row">
						<div>
							<div class="alert-title">{{ alert.title }}</div>
							<div class="alert-time">{{ alert.time }}</div>
						</div>
						<div :class="'alert-level level-' + alert.level">{{ alert.levelText }}</div>
					</div>
					
					<div class="alert-content">{{ alert.description }}</div>
					
					<div class="alert-details">
						<div class="detail-item">
							<div class="detail-label">车辆信息</div>
							<div class="detail-value">{{ alert.vehicle }}</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">当前位置</div>
							<div class="detail-value">{{ alert.location }}</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">异常类型</div>
							<div class="detail-value">{{ alert.typeText }}</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">处理状态</div>
							<div class="detail-value">{{ alert.statusText }}</div>
						</div>
						<div class="detail-item" v-if="alert.value">
							<div class="detail-label">异常数值</div>
							<div class="detail-value">{{ alert.value }}</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">负责人</div>
							<div class="detail-value">{{ alert.handler }}</div>
						</div>
					</div>
					
					<div class="alert-actions">
						<el-button size="small" type="primary" @click="handleAlert(alert)" v-if="alert.status === 'pending'">立即处理</el-button>
						<el-button size="small" type="success" @click="viewDetails(alert)">查看详情</el-button>
						<el-button size="small" @click="contactHandler(alert)">联系负责人</el-button>
						<el-button size="small" type="warning" @click="escalateAlert(alert)" v-if="alert.level === 'critical'">升级处理</el-button>
					</div>
				</div>
			</div>
		</div>

		<!-- 刷新按钮 -->
		<el-button class="refresh-btn" type="primary" circle @click="refreshAlerts">
			<i class="el-icon-refresh"></i>
		</el-button>
	</div>

	<!-- 所有的 js -->
	<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				filterForm: {
					level: '',
					type: '',
					status: ''
				},
				activeQuickFilter: '',
				quickFilters: [
					{key: 'urgent', label: '🚨 紧急处理'},
					{key: 'temperature', label: '🌡️ 温度异常'},
					{key: 'delay', label: '⏰ 运输延迟'},
					{key: 'damage', label: '📦 货物破损'},
					{key: 'today', label: '📅 今日预警'}
				],
				alerts: [
					{
						id: 1,
						title: '货厢温度严重超标',
						description: '京A·12345车辆货厢温度持续超过8℃，已超出冷链运输标准，可能影响货物品质',
						level: 'critical',
						levelText: '紧急',
						type: 'temperature',
						typeText: '温度异常',
						status: 'pending',
						statusText: '待处理',
						vehicle: '京A·12345 (张师傅)',
						location: '河北省廊坊市G1高速',
						value: '12.5℃ (标准: ≤8℃)',
						handler: '李经理',
						time: '2024-01-15 14:30:25'
					},
					{
						id: 2,
						title: '运输严重延迟',
						description: '沪B·67890车辆在服务区停留超过2小时，预计延迟到达4小时以上',
						level: 'critical',
						levelText: '紧急',
						type: 'delay',
						typeText: '运输延迟',
						status: 'processing',
						statusText: '处理中',
						vehicle: '沪B·67890 (李师傅)',
						location: '广东省东莞市服务区',
						value: '延迟4.2小时',
						handler: '王主管',
						time: '2024-01-15 12:15:10'
					},
					{
						id: 3,
						title: '制冷设备异常',
						description: '川C·11111车辆制冷设备出现故障报警，温度控制不稳定',
						level: 'warning',
						levelText: '警告',
						type: 'equipment',
						typeText: '设备故障',
						status: 'pending',
						statusText: '待处理',
						vehicle: '川C·11111 (王师傅)',
						location: '四川省内江市',
						value: '制冷功率下降30%',
						handler: '陈技师',
						time: '2024-01-15 13:45:33'
					},
					{
						id: 4,
						title: '货物包装破损',
						description: '粤A·88888车辆在装卸过程中发现部分货物包装破损，需要检查处理',
						level: 'warning',
						levelText: '警告',
						type: 'damage',
						typeText: '货物破损',
						status: 'resolved',
						statusText: '已解决',
						vehicle: '粤A·88888 (陈师傅)',
						location: '广东省佛山市配送中心',
						value: '破损率2.3%',
						handler: '刘主管',
						time: '2024-01-15 10:20:15'
					},
					{
						id: 5,
						title: '路线偏离提醒',
						description: '鲁D·99999车辆偏离预定路线超过5公里，可能影响配送时效',
						level: 'info',
						levelText: '信息',
						type: 'route',
						typeText: '路线偏离',
						status: 'pending',
						statusText: '待处理',
						vehicle: '鲁D·99999 (赵师傅)',
						location: '山东省济南市',
						value: '偏离5.8公里',
						handler: '孙调度',
						time: '2024-01-15 15:10:42'
					},
					{
						id: 6,
						title: '湿度超标预警',
						description: '苏E·55555车辆货厢湿度超过标准值，可能影响货物保鲜效果',
						level: 'warning',
						levelText: '警告',
						type: 'temperature',
						typeText: '温度异常',
						status: 'processing',
						statusText: '处理中',
						vehicle: '苏E·55555 (周师傅)',
						location: '江苏省南京市',
						value: '湿度85% (标准: ≤75%)',
						handler: '吴经理',
						time: '2024-01-15 14:55:18'
					}
				]
			},
			computed: {
				filteredAlerts() {
					let filtered = this.alerts;
					
					if (this.filterForm.level) {
						filtered = filtered.filter(alert => alert.level === this.filterForm.level);
					}
					
					if (this.filterForm.type) {
						filtered = filtered.filter(alert => alert.type === this.filterForm.type);
					}
					
					if (this.filterForm.status) {
						filtered = filtered.filter(alert => alert.status === this.filterForm.status);
					}
					
					return filtered.sort((a, b) => {
						// 紧急预警排在前面
						if (a.level === 'critical' && b.level !== 'critical') return -1;
						if (b.level === 'critical' && a.level !== 'critical') return 1;
						// 待处理排在前面
						if (a.status === 'pending' && b.status !== 'pending') return -1;
						if (b.status === 'pending' && a.status !== 'pending') return 1;
						return new Date(b.time) - new Date(a.time);
					});
				},
				stats() {
					return {
						critical: this.alerts.filter(a => a.level === 'critical' && a.status !== 'resolved').length,
						warning: this.alerts.filter(a => a.level === 'warning' && a.status !== 'resolved').length,
						info: this.alerts.filter(a => a.level === 'info' && a.status !== 'resolved').length,
						resolved: this.alerts.filter(a => a.status === 'resolved').length
					};
				}
			},
			methods: {
				filterAlerts() {
					this.activeQuickFilter = '';
					this.$message.success(`筛选完成，找到 ${this.filteredAlerts.length} 条预警`);
				},
				resetFilter() {
					this.filterForm = {
						level: '',
						type: '',
						status: ''
					};
					this.activeQuickFilter = '';
				},
				applyQuickFilter(key) {
					this.activeQuickFilter = key;
					this.resetFilter();
					
					switch(key) {
						case 'urgent':
							this.filterForm.level = 'critical';
							this.filterForm.status = 'pending';
							break;
						case 'temperature':
							this.filterForm.type = 'temperature';
							break;
						case 'delay':
							this.filterForm.type = 'delay';
							break;
						case 'damage':
							this.filterForm.type = 'damage';
							break;
						case 'today':
							// 这里可以添加今日筛选逻辑
							break;
					}
				},
				refreshAlerts() {
					this.$message.info('正在刷新预警数据...');
					// 模拟数据刷新
					setTimeout(() => {
						this.$message.success('预警数据已更新');
					}, 1000);
				},
				handleAlert(alert) {
					this.$confirm(`确认开始处理预警: ${alert.title}?`, '处理确认', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						alert.status = 'processing';
						alert.statusText = '处理中';
						this.$message.success('已开始处理该预警');
					}).catch(() => {});
				},
				viewDetails(alert) {
					this.$message.info(`查看预警详情: ${alert.title}`);
					// 这里可以跳转到详情页面
				},
				contactHandler(alert) {
					this.$message.info(`联系负责人: ${alert.handler}`);
					// 这里可以实现联系功能
				},
				escalateAlert(alert) {
					this.$confirm(`确认将预警升级处理: ${alert.title}?`, '升级确认', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'error'
					}).then(() => {
						this.$message.success('预警已升级，将通知高级管理人员');
					}).catch(() => {});
				}
			}
		});
	</script>
</body>
</html>